<template>
  <el-dialog class="shareDialog" :visible.sync="show" :show-close="false" :modal="false" custom-class="add">
    <div slot="title" >Share</div>
    <div class="iconContainer">
      <p class="iconItem" v-for="icon in iconLink" :key="icon.icon" >
        <a  @click="OpenConcat(icon)" class="svgIcon" :title="icon.word">
          <svg class="svgNormal" >
            <use :xlink:href="'#'+icon.icon"></use>
          </svg>
          <svg class="svgHover" >
            <use :xlink:href="'#'+icon.iconHover"></use>
          </svg>
         
        </a>
        <span>{{icon.title}}</span>
      </p>

    </div>
    <div slot="footer" @click="cancle" >Cancel</div>

  </el-dialog>
</template>

<script>
import { productShareNumFunc , articleShareNumFunc} from '@/utils/kanban.js'

export default {
  props: {
    show: Boolean,
    closeDialog:Function,
    product: Object,
    isArticle: Boolean
  },
  data() {
    return{
      iconLink: [
        {icon:'icon-Facebook_normal', iconHover: 'icon-Facebook_hover', title: 'Facebook',word:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u='},
        // {icon:'icon-Instagram_normal_2', iconHover: 'icon-Instagram_hover_2',url:''},
        {icon:'icon-Twitter_normal', iconHover: 'icon-Twitter_hover', title: 'Twitter',word:'Share on Twitter', url:'https://twitter.com/intent/tweet?text=' },
        {icon:'icon-Message_normal', iconHover: 'icon-Message_hover', title: 'E-mail', word:'Share on Email', url:'mailto:?subject='},
        {icon:'icon-Link_normal', iconHover: 'icon-Link_hover', title: 'Link', word:'Copy Link to Clipboard', url:'copy'}
      
      ],
    }
  },
  methods: {
    cancle(){
      this.$emit("closeDialog")
    },
    OpenConcat (icon){
      let that = this
      let url = icon.url
      let location = window.location.href
      let isCopy = url.indexOf('copy') > -1
      let share_way = ''
      if(url.indexOf('facebook') > -1){
        url += location + '&quote=' + this.product.title
        share_way = 'Facebook'
      } else if (url.indexOf('twitter') > -1){
        url+= this.product.title + '&url=' + location
        share_way = 'Twitter'
      } else if(url.indexOf('mailto') > -1) {
        url+= this.product.title + '&body=' + location
        share_way = 'Email'
      } else if (isCopy){
        url = location
        share_way = 'Link'
      }
      if(isCopy){
        this.$copyText(url).then(function () {
          that.$message.success('Link Copied')
        }, function () {
           that.$message.success('Link not copy')
        })
      }else {
        window.open(url)
      }
      if(this.isArticle){
        articleShareNumFunc(share_way, this.product.title,this.product.id)
      } else {
        productShareNumFunc(share_way, this.product.product_model_name)

      }
    },
  }
}
</script>

<style lang="scss">
.shareDialog{
  background-color: rgba(54, 52, 52, 0.2);
  .el-dialog{
    margin-top: 0 !important;
    width: 100%;
    bottom: 0;
    position: absolute;
    margin-bottom: 0;
    height: auto;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    .el-dialog__header{
      color: #363434;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      padding:  16px 0 0;
    }
    .el-dialog__body{
      padding: 0 20px;
    }
    .el-dialog__footer{
      height: 54px;
      line-height: 54px;
      border-top: 1px solid #F2F1F0;
      color: #363434;
      font-size: 14px;
      text-align: center;
      padding: 0;
    }
    .iconContainer{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 134px;
      .iconItem{
        position: relative;
        min-width: 72px;
        cursor: pointer;
        text-align: center;
       
        span{
          color: #363434;
          text-align: center;
          font-size: 14px; 
          white-space: nowrap;
          margin-top: 8px;
          display: block;
        }
        .svgIcon{
          position: relative;
          display: inline-block;
          width: 40px;
          height: 40px;
          svg{
            width: 100%;
            height: 100%;
          }
          &:focus{
            .svgHover{opacity: 1;}
            .svgNormal{opacity: 0;}
          }
          .svgHover{opacity: 0;position: absolute;left: 0;top: 0;}
          .svgNormal{opacity: 1; }
        }
      
      }
    }
 
  }

}

.dialog-fade-enter-active{
  //  animation: anim-open-add .3s;
  .el-dialog.add{
    animation: anim-open-add .3s;
  }
} 
.dialog-fade-leave-active{
  // animation: anim-close-add  .3s;
  .el-dialog.add{
    animation: anim-close-add  .3s;
  }
} 
@keyframes anim-open-add  {
  0% {
      transform: translate3d(0,100% , 0);
      opacity: 0;
  }
  100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}
 
@keyframes anim-close-add {
  0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
  100% {
      transform: translate3d(0, 100%, 0);
      opacity: 0;
  }
}
</style>